<template>
  <div class="main mainPadding p-t" style="background: #fff">
    <div class="max-w">
    <listView
      :breadcrumb_list="breadcrumb_list"
      :page="page"
      :showPage="false"
      @currentChange="currentChange"
    >
      <template v-slot:topR>
        <el-breadcrumb separator="|">
          <el-breadcrumb-item
            v-for="(item, i) in breadcrumb_list1"
            :key="i"
            v-show="item.isNav == 1"
            @click="getUlist(item, i)"
          >
            <span :style="index == i ? 'color:red;' : ''" class="cursor-p">{{
              item.name
            }}</span></el-breadcrumb-item
          >
        </el-breadcrumb>
      </template>
      <template v-slot:content>
        <div class="MarT35 p-b">
          <el-row :gutter="20">
            <el-col :span="16">
              <div v-if="lists.length == 0">
                <el-empty :image-size="150" description="暂无数据" />
              </div>
              <el-row :gutter="20" style="min-height: 350px">
                <el-col
                  v-for="item in lists"
                  :key="item"
                  :span="24"
                  style="padding-top: 20px"
                  class="cursor-p"
                  @click="detail(item)"
                >
                  <div class="item" v-if="item.thumb">
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <div class="ad-view" style="height: 228px">
                          <imgView :src="item.thumb" />
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div
                          class="item flex flex-d flex-j-s"
                          style="height: 228px"
                        >
                          <div>
                            <div class="title omit-2">{{ item.name }}</div>
                            <div class="desc omit-2">{{ item.blurb }}</div>
                          </div>
                          <div class="time">{{ item.startTm }}</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                  <div
                    class="item flex flex-d flex-j-s"
                    v-if="!item.thumb"
                    style="height: 180px"
                  >
                    <div>
                      <div class="title omit-2">{{ item.name }}</div>
                      <div class="desc omit-2">{{ item.blurb }}</div>
                    </div>
                    <div class="time">{{ item.startTm }}</div>
                  </div>
                </el-col>
              </el-row>
              <div class="pager" v-if="isPage">
                <myPage @nextbtn="nextbtn" @prevbtn="prevbtn" />
              </div>
            </el-col>
            <el-col :span="8">
              <Card1 title="创新声音" :more="false" class="shadow-1">
                <template v-slot:main1>
                  <myEmpty description="" v-if="!list1 || list1.length == 0" />
                  <div
                    class="cxview omit"
                    v-for="item in list1"
                    :key="item"
                    @click="detail1(item, '创新声音')"
                  >
                    {{ item.name }}
                  </div>
                </template>
              </Card1>
              <Card1
                title="地方观察"
                :more="false"
                class="shadow-1"
                style="margin-top: 20px"
              >
                <template v-slot:main1>
                  <myEmpty description="" v-if="!list2 || list2.length == 0" />
                  <div
                    class="ad-view po-re"
                    v-for="item in list2"
                    :key="item"
                    style="height: 207px; margin-bottom: 20px"
                    @click="detail1(item, '地方观察')"
                  >
                    <imgView :src="item.thumb" />
                    <div
                      class="po-ab0 xf-font-small omit"
                      style="width: 100%; text-align: left"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                </template>
              </Card1>
            </el-col>
          </el-row>
        </div>
      </template>
    </listView>
    </div>
  </div>
</template>
  
  <script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from "crypto-js";
import listView from "../components/list.vue";
import { useRouter } from "vue-router";
const Router = useRouter();
import Card1 from "../components/card1.vue";
// 面包屑
const query = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob);
const breadcrumb_list = ref([{ name: "政务资讯" }, { name: query.title }]);
const breadcrumb_list1 = query.titleList;
const index = ref(query.i);
//获取列表
const lists = ref([]);
const pageinfo = ref({
  nextTag: 0,
  prevTag: 0,
});
const isPage = ref(true)
const getList = (id) => {
  proxy.$comJs.getNewList(10, id, { ...pageinfo.value }, "", (data) => {
    data.list.map((item)=>{
      lists.value.push(item)
    })
    pageinfo.value = {
      nextTag: data.nextTag,
      prevTag: data.prevTag,
    };
    if(data.nextTag < 0||data.nextTag==0){
      isPage.value = false
    }
  });
};
getList(query.titleList[index.value].id);
const nextbtn = () => {
  getList(query.titleList[index.value].id);
};
const prevbtn = () => {
  getList(query.titleList[index.value].id);
};
const getUlist = (item, i) => {
  pageinfo.value = {
    nextTag: 0,
    prevTag: 0,
  };
  isPage.value = true
  lists.value = []
  getList(item.id);
  index.value = i;
  breadcrumb_list.value = [{ name: "政务资讯" }, { name: item.name }];
};
// 创新声音、地方观察
const list1 = ref([]);
const list2 = ref([]);
const getGD = () => {
  proxy.$comJs.getNewList(20, 143, {}, "", (list) => {
    list1.value = list.list;
  });
  proxy.$comJs.getNewList(20, 142, {}, "", (list) => {
    list2.value = list.list;
  });
};
getGD();
const page = ref({
  total: 10,
});
const currentChange = (e) => {
  ElMessage("第" + e + "条");
};
const detail = (item) => {
  const routeUrl = Router.resolve({
    path: "/animatedly/info",
    query: {
      ob: proxy.$comJs.encry({
        title: breadcrumb_list.value[1].name,
        id: item.newsId,
        path: "/animatedly/list",
        first_title: "政务资讯",
        first_path: -1,
      }),
    },
  });
  window.open(routeUrl.href, "_blank");
};
const detail1 = (item,title) => {
  const routeUrl = Router.resolve({
    path: "/animatedly/info",
    query: {
      ob: proxy.$comJs.encry({
        title: title,
        id: item.newsId,
        path: "/animatedly/list",
        first_title: "政务资讯",
        first_path: -1,
      }),
    },
  });
  window.open(routeUrl.href, "_blank");
};
</script>
  
  <style lang='less' scoped>
.item {
  height: 228px;

  .title {
    font-size: 26px;
    text-align: left;
    font-weight: bold;
  }
  .desc {
    font-size: 13px;
    color: #8d8d8d;
    text-align: left;
    line-height: 23px;
    margin-top: 22px;
  }
  .time {
    font-size: 10px;
    color: #8d8d8d;
    text-align: right;
    margin-top: 18px;
  }
}
.cxview {
  font-size: 14px;
  margin-top: 28px;
  text-align: left;
}
.pager {
  display: flex;
  justify-content: center;
  padding: 34px 0;
}
</style>
  
